<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文章管理</title>
<link rel="stylesheet" href="../webjars/layui/2.5.6/css/layui.css"
	media="all">


</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>修改文章</legend>
	</fieldset>
	<form class="layui-form" action="">
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">文章id</label>
			<div class="layui-input-block">
				<input v-model="article.tid" type="text" name="username" lay-verify="required"
					lay-reqtext="文章id不能为空！" placeholder="请输入(必填)" autocomplete="off"
					class="layui-input">
			</div>
		</div> -->
		<div class="layui-form-item">
			<label class="layui-form-label">文章用户id</label>
			<div class="layui-input-block">
				<input v-model="article.uid" type="text" name="username" lay-verify="required"
					lay-reqtext="用户id不能为空！" placeholder="请输入(必填)" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">文章标题</label>
			<div class="layui-input-block">
				<input v-model="article.atitle" type="text" name="username" lay-verify="required"
					lay-reqtext="文章标题不能为空！" placeholder="请输入(必填)" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">文章类型</label>
			<div class="layui-input-block">
				<select v-model="cid" name="interest" lay-filter="category" lay-verify="required"
					autocomplete="off" lay-reqtext="文章类型为必选项！">
					<option value=""></option>
					<option value="1" selected="">01交友</option>
					<option value="2" >02服饰</option>
					<option value="3">03美食</option>
					<option value="4">04娱乐</option>
					<option value="5">05出行</option>
				</select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">文章图片</label>
			<div class="layui-input-block">
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo2"
						style="height: 500px; width: 500px; border: 1px solid black">
					<p id="demoText"></p>
				</div>
				<button type="button" class="layui-btn" id="test1">上传图片</button>
					
				</div>
		
		<div class="layui-inline">
				<label class="layui-form-label">文章日期</label>
				<div class="layui-input-inline">
					<input v-model="article.tdate" type="text" name="date" id="date" lay-verify="date"
						placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
			</div>


		
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文章简介</label>
			<div class="layui-input-block">
				<textarea v-model="article.introduction" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文章内容</label>
			<div class="layui-input-block">
				<textarea v-model="article.content" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button  type="submit" class="layui-btn" lay-submit=""
					lay-filter="demo1" @click.prevent="submit">修改提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>文章ID</th>
						<th>文章标题</th>
					</tr>
				</thead>
				<tbody @click="getval(a.tid,a.uid,a.atitle,a.cid,a.introduction,a.content)" v-for="a in list">
					<tr>
						<td>{{a.tid}}</td>
						<td>{{a.atitle}}</td>
					</tr>
				</tbody>
			</table></form>
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">单行选择框</label>
			<div class="layui-input-block">
				<select name="interest" lay-filter="aihao">
					<option value=""></option>
					<option value="0">写作</option>
					<option value="1" selected="">阅读</option>
					<option value="2">游戏</option>
					<option value="3">音乐</option>
					<option value="4">旅行</option>
				</select>
			</div>
		</div> -->
		<!-- <div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文本域</label>
			<div class="layui-input"E:/源辰培训/94班/二期/web/layout/04 商品添加.jpg"-block">
				<textarea placeholder="E:/源辰培训/94班/二期/web/layout/04 商品添加.jpg""请输入内容" class="layui-textarea"></textarea>
			</div>"E:/源辰培训/94班/二期/web/layout/04 商品添加.jpg"
		</div>
		<div class="layui-form-item">"E:/源辰培训/94班/二期/web/layout/04 商品添加.jpg"
			<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
		</div> -->
	</form>
<!-- vue -->
<script type="text/javascript"src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script type="text/javascript"src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="../webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
<script type="text/javascript">
	var v1 = new Vue({
	 el:".layui-form",
	 data:{
		article:{uid:"",atitle:"",tid:"",tdate:"",introduction:"",content:""},
		cid:2,
		aimg:null,
		list:[],
	 },
	 created(){
			axios.post("../article/allArticle.s").then(res=>{
				this.list = res.data;
			})
		 },
	 methods:{
		 submit(){
			 console.log(this.article.content);
			 let url="../article/updateArticle.s";
			 var params = new URLSearchParams();
			 params.append("uid",this.article.uid);
			 params.append("atitle",this.article.atitle);
			 params.append("tid",this.article.tid);
			 params.append("tdate",this.article.tdate);
			 params.append("introduction",this.article.introduction);
			 params.append("content",this.article.content);
			 params.append("cid",this.cid);
			 params.append("aimg",this.aimg);
			 axios.post(url,params).then(res=>{
				 alert(res.data.msg);
				 console.log(this.aimg);
				 location.reload();
			 })
		 },
		 getval(tid,uid,atitle,cid,introduction,content){
			 this.article.tid=tid;
			 this.article.uid=uid;
			 this.article.atitle=atitle;
			 this.article.introduction=introduction;
			 this.article.content=content;
			 this.cid=cid;
		 }
	 },
	 mounted(){
		 
		 //常规使用 - 普通图片上传
		 //构建图片上传的控件
		  layui.upload.render({
		    elem: '#test1'
		    ,url: '../cmupload.s' //改成您自己的上传接口
		    ,done: res=>{
		    	if(res.code==1){
		    		//在方框渲染
		    		demo2.src = res.data;
		    		this.aimg = res.data;
		    	}
		    }
		  });
		 
		 layui.form.render(); 
		 //layui.form.render('select');
		 //layui事件触发模块
		 layui.form.on('select(category)', data=>{	
			//console.info(11); 
		  	console.log(data);
		  	this.cid=data.value;
			});
		 layui.form.on('submit(demo1)',data=>{
			 /*  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			  console.log(data.field)  *///当前容器的全部表单字段，名值对形式：{name: value}
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
	 },
	})
</script>
</body>
</html>